<template>
  <div id="assign">
    <el-button size="mini" type="text" @click="to">{{data.status==100 ? '派单' : '工单'}}</el-button>
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="data.status==100 ? '派单' : '工单'" width="680px">
      <el-form ref="form" :model="value" :inline="true" :rules="rules" size="small" label-width="80px">
      <el-form-item label="服务等级" prop="serviceLevel">
        <el-select v-model="value.serviceLevel" clearable class="filter-item">
          <el-option v-for="item in serviceLevelOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="故障类型" >
        <el-select v-model="value.faultType" clearable class="filter-item">
          <el-option v-for="item in faultTypeOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="服务商" prop="supplier">
        <el-select v-model="value.supplier" clearable class="filter-item" @change="handleSelect">
          <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定合同" >
        <!-- <el-input v-model="value.contractId" style="width: 200px;"/> -->
        <el-select v-model="value.contractId" clearable class="filter-item">
          <el-option v-for="item in contractOptions" :key="item.id" :label="item.name" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="上门时间" prop="addriveTime">
        <el-date-picker
            v-model="value.addriveTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间" style="width: 200px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务时长" prop="serviceTime">
        <el-input-number v-model.number="value.serviceTime" :min="0" :max="999" controls-position="right" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="所需工具" >
        <el-input v-model="value.requireTool" style="width: 450px;" rows="5" type="textarea"/>
      </el-form-item>
      <el-form-item label="所需备件" >
        <el-input v-model="value.requireTool" style="width: 450px;" rows="5" type="textarea"/>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="value.notes" style="width: 450px;" rows="5" type="textarea"/>
      </el-form-item>
      <!-- <el-form-item label="派单人" prop="linker">
        <el-input v-model="form.linker"/>
      </el-form-item> -->
      <!-- <el-form-item label="派单时间">
        <el-date-picker
          v-model="form.inputTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item> -->
    </el-form>
    <div style="text-align: right">
        <el-button v-show="data.status===100" :loading="loading" type="primary" @click="handleSubmit">确认</el-button>
        <el-button type="text" @click="cancel">取消</el-button>
    </div>
    </el-dialog>
    
  </div>
</template>

<script>
import request from '@/utils/request'
import { add, edit } from '@/api/tWorkOrder'
import { get } from '@/api/dictDetail'
export default {
  name: "OrderInfo",
  props: {
    data: {
      type: Object,
      required: true
    },
    sup_this: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false, dialog: false,
      serviceLevelOptions: [],
      faultTypeOptions: [],
      supplierOptions: [],
      contractOptions: [],
      serviceproviderName: '',
      value: {
        id: this.data.id,
        serviceLevel: this.data.serviceLevel,
        contractId: this.data.contractId,
        faultType: this.data.faultType,
        supplier: this.data.supplier,
        addriveTime: this.data.addriveTime,
        serviceTime: this.data.serviceTime,
        requireTool: this.data.requireTool,
        notes: this.data.notes,
        assignOperator: this.data.assignOperator,
        assignTime: this.data.assignTime,
        acceptOperator: this.data.acceptOperator,
        status: this.data.status,
        acceptTime: this.data.acceptTime
      },
      rules: {
        serviceLevel: [
          { required: true, message: '请选择服务等级', trigger: 'blur' }
        ],
        supplier: [
          { required: true, message: '请选择服务商', trigger: 'blur' }
        ],
        addriveTime: [
          { required: true, message: '请选择上门时间', trigger: 'blur' }
        ],
        serviceTime: [
          { required: true, message: '请选择服务时长', trigger: 'blur' }
        ],
        assignOperator: [
          { required: true, message: '请选择派单人', trigger: 'blur' }
        ],
        assignTime: [
          { required: true, message: '请选择派单时间', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 加载数据字典
    this.getDict("fault_type")
    this.getDict("service_level")
    this.getSupplier()
  },
  methods: {
    async getDict(name) {
      return new Promise((resolve, reject) => {
        get(name).then(res => {
          if(name=='fault_type'){
            const content = [].concat(res.content);
            const _this = this
            content.forEach(function(data, index) {
              const faultTypeOption = {id: data.id,name: data.label}
              _this.faultTypeOptions.push(faultTypeOption)
            })
          }
          else {
            const content = [].concat(res.content);
            const _this = this
            content.forEach(function(data, index) {
              const serviceLevelOption = {id: data.id,name: data.label}
              _this.serviceLevelOptions.push(serviceLevelOption)
            })
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    handleSelect(id) {
      let obj1 = {}
      obj1 = this.supplierOptions.find(item => {
        return item.id === id
      })
      this.getSupplierContract(obj1.name)
    },
    to() {
      this.value.id = this.data.id
      this.dialog = true
      this.value = this.data
    },
    getSupplier() {
       request({
          url: 'api/tServiceproviderInfoAll',
          method: 'get'
        }).then(res => {
          const content = [].concat(res)
          const _this = this
          content.forEach(function(data, index) {
            const supplierOptions = { id: data.id, name: data.seproName }
             _this.supplierOptions.push(supplierOptions)
          })
        }).catch(err => {
          console.log(err)
        })  
    },
    getSupplierContract(name) {
       request({
          url: 'api/tServiceproviderContract?page=0&size=1000&sort=creatTime,desc&serviceproviderName=' + name,
          method: 'get'
        }).then(res => {
          const content = [].concat(res.content)
          const _this = this
          _this.contractOptions = []
          content.forEach(function(data, index) {
            const contractOptions = { id: data.id, name: data.contractName }
            _this.contractOptions.push(contractOptions)
          })
        }).catch(err => {
          console.log(err)
        })  
    },
    cancel() {
      this.resetForm()
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.value.status=200
          const _this = this
          request({
            url: 'api/tWorkOrder/assign',
            method: 'post',
            data:_this.value
          }).then(res => {
            this.resetForm()
            this.$notify({
              title: '派单成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
            this.sup_this.init()
          }).catch(err => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.dialog = false
        this.$refs['form'].resetFields()
        this.value = {
          id: '',
          serviceLevel: '',
          contractId: '',
          faultType: '',
          supplier: '',
          addriveTime: '',
          serviceTime: '',
          requireTool: '',
          notes: '',
          assignOperator: '',
          assignTime: '',
          acceptOperator: '',
          acceptTime: '',
        }
    },
  }
}
</script>

<style scoped>
  #assign{
    display: inline-block;
    margin-right: 3px;
  }
</style>